import { homeDataApi } from '@/api'
import React, { useEffect, useState } from 'react'
import "./home.less"
import SubjectsItem from './components/SubjectsItem'

export default function Home() {
    // 在ts里面，{} 是一个 字面量类型，里面没有任何的 属性
    // 如果你希望 data 是一个对象，在 useState<T> 泛型里面，写入 data 对应的类型就行
    const [data, setData] = useState<HomeDataModel>()
    useEffect(() => {
        homeDataApi().then(res => {
            if (res.errCode === 0) {
                // 修改data的时候，要保证，修改回去的类型要和原来的data的类型要一致
                setData(res.data)
            }
        })
    }, [])
    return (
        <div className='home'>
            <div className="title">
                {data?.exam.title}
            </div>
            <div className="wel">
                错题：{data?.wrong}
            </div>
            <div className="subjects">
                <h3>学科题库</h3>
                <div className="list">
                    {/* 遍历 获取回来的数组，生成多个 item */}
                    {
                        data?.exemItems.map(item => <SubjectsItem data={item} key={item.id} />)
                    }
                </div>
            </div>
        </div>
    )
}
